<template>
  <div id="console">
    <el-container>
      <el-header>
        <el-page-header @back="goBack" style="margin-top: 12px;color:white;width: 70%" content="管理员工作台">
        </el-page-header>
      </el-header>

      <el-container direction="horizontal">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu
                   router
                   :default-active="activeIndex"
                   active-text-color="#ffd04b"
                   unique-opened
          >
            <el-submenu index="0">
              <template slot="title"><i class="el-icon-house"></i>控制台首页</template>
              <el-menu-item-group>
                <el-menu-item index="/console/index">用户图表分析</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-user"></i>用户管理</template>
              <el-menu-item-group>
                <el-menu-item index="/console/user">用户CRUD</el-menu-item>

              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-menu"></i>文章管理</template>
              <el-menu-item-group>
                <el-menu-item index="/console/article">文章CRUD</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title"><i class="el-icon-setting"></i>个人中心</template>
              <el-menu-item-group>
                <el-menu-item index="3-1">管理员修改</el-menu-item>
                <el-menu-item index="3-2">捐赠管理员</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-container>
          <el-main>
            <router-view/>
          </el-main>

          <el-footer>
              Copyright &copy HyoJoo-W （本项目不必参考任何项目！）
          </el-footer>

        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import 'element-ui/lib/theme-chalk/display.css';
import UserCRUD from "@/components/UserCRUD";

export default {
  name: "Console",
  components: {
    UserCRUD
  },
  computed: {
    activeIndex() {
      const route = this.$route;
      const {meta,path} = route;
      // if(path === '/console/index'){
      //   return 'console/index';
      // }
      if(meta.activeIndex){
        return meta.activeIndex;
      }
      return path;
    }
  },
  data() {
    return {

    };
  },
  methods: {
    goBack() {
      history.go(-1);
    }
  },
  mounted() {
    this.activeIndex = window.location.pathname;
  }
}
</script>

<style scoped>

.el-header{
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;

  position: relative;
  width: 100%;
  height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;

  display: block;
  position: absolute;
  left: 0;
  top: 60px;
  bottom: 0;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 20px;

  position: absolute;
  left: 200px;
  right: 0;
  top: 60px;
  bottom: 60px;
  overflow-y: scroll;
}

@media screen and (max-width: 800px){
  .el-main {
    left: 0;
  }
  .el-footer{
    display: none;
  }
  .el-aside{
    display: none;
  }
}

.el-footer{
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;

  position: absolute;
  left: 200px;
  right: 0;
  bottom: 0;
}

body > .el-container {
  margin-bottom: 40px;
}

</style>